<template>
    <div>
        <div class="OnComing">
            <template>
                <el-table
                    class="heard-bg el-table"
                    :data="onComingTableDate"
                    stripe
                    border
                    highlight-current-row
                    style="100%"
                >
                    <el-table-column label="交班人" prop="handoverName"></el-table-column>
                    <el-table-column label="交班信息" prop="content" show-overflow-tooltip></el-table-column>
                    <el-table-column label="交班时间" prop="handoverTime">
                        <template slot-scope="scope">{{scope.row.handoverTime | filterDateYYYYMMDD}}</template>
                    </el-table-column>
                    <el-table-column label="操作" prop="succeedName">
                        <template slot-scope="scope">
                            <div class="text_a" @click="handleclickInfo($event,scope.row)">查看详情</div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <el-dialog
            v-drag
            :visible="handleOnComingFlag"
            append-to-body
            center
            width="1000px"
            class="header-button dialogHeader"
            @close="handleOnComingFlag=false"
            :close-on-click-modal="false"
        >
            <div slot="title" class="dialog_title">接班信息详情</div>
            <div class="dialog_body">
                <el-form
                    :model="formData"
                    class="demo-form-inline"
                    size="small"
                    label-width="120px"
                    ref="formData"
                >
                    <el-row>
                        <el-col :span="10">
                            <div class="width30">
                                <el-form-item label="信息提交人:" class="text_fl">
                                    <el-input :disabled="true" v-model.trim="formData.handoverName"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <div class="width30">
                                <el-form-item label="交班内容:">
                                    <el-input
                                        type="textarea"
                                        :autosize="{minRows:3,maxRows:4}"
                                        :disabled="true"
                                        v-model.trim="formData.content"
                                    ></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="text_center" style="margin-top:20px;">
                    <el-button type="primary" size="small" @click="handleOnComingFlag = false">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import moment from 'moment';
export default {
    name: 'OnComing',
    props: {
        // 点击 删除的方法
        handleclickComingClose: {
            required: true,
            type: Function,
        },

        onComingTableDate: {
            required: true,
            type: Array,
        },

    },
    data() {
        return {
            handleOnComingFlag: false,
            formData: {
                handoverName: "",
                content: '',
            },
        }
    },
    filters: {
        filterDateYYYYMMDD: (value) => {
            value = (`${value}`).trim();
            if (value === '00000000') return value;
            if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
            return '';
        },
    },

    mounted() {

    },
    methods: {
        readCurrtenInfo(row) {
            let parent = {
                id: row.id,
            };
            this.$post.information.setVisited(parent).then((res) => {
                if (res.data.success) {
                    // this.$message.success('数据标记已读');
                }
            });

        },
        // 点击查看详情 
        handleclickInfo(event, row) {
            console.log('点击查看详情', row);
            this.handleOnComingFlag = true;
            this.readCurrtenInfo(row)
            this.formData.handoverName = row.handoverName;
            this.formData.content = row.content;
        },
    },
}
</script>
<style scoped lang="scss">
.OnComing {
    min-width: 500px;
}
</style>